<template>
  <el-button-package
    ref="ef-el-button-package"
    :c-m="CM"
  />
</template>

<script lang="ts">
/*
prop 列表
  active: boolean                                                   是否激活 [默认为 false]
  activeType: 'primary' | 'success' | 'info' | 'warning' | 'danger' 按钮激活显示的类型 [默认为 primary]
  buttonCM: ComponentModel                                          按钮组件模型 [参考 ElButtonPackage]
ref 列表
  ref-el-button-package [默认]
*/
import { Component, Prop } from 'vue-property-decorator'
import TgComponent from '../TgComponent'
import { ComponentModel } from '@TG/interface'
import { isNotEmpty } from '@TG/kit/validate'
import ElButtonPackage from '../ElPackage/ElButtonPackage.vue'

@Component({
  name: 'TgButtonStatus',
  components: {
    ElButtonPackage
  }
})
export default class extends TgComponent {
  @Prop({ type: Boolean, default: false }) private active!: boolean
  @Prop({ type: String, default: 'primary' }) private activeType!: 'primary' | 'success' | 'info' | 'warning' | 'danger'
  @Prop({ type: Object }) private buttonCM!: ComponentModel

  private type: string = this.active ? this.activeType : ''

  get CM() {
    const buttonPops = this.buttonCM?.props || {}
    const buttonEvents = this.buttonCM?.events || {}
    const props = Object.assign({ plain: false }, buttonPops, this.$attrs, { type: this.type })
    const events = Object.assign({}, buttonEvents, this.$listeners, { click: () => this.toggle(buttonEvents.click as Function) })
    return Object.assign({}, this.buttonCM, { props }, { events })
  }

  private toggle(click: Function) {
    if (this.active) {
      this.type = ''
    } else {
      this.type = this.activeType
    }
    this.$emit('update:active', !this.active)
    if (isNotEmpty(click)) {
      click(!this.active)
    }
  }

  public defaultRef() {
    return 'el-button-package'
  }
}
</script>
